// 右侧固定操作按钮组功能实现
(function() {
  // 创建侧边按钮组HTML结构
  function createSideActions() {
    // 检查是否已存在侧边按钮组
    if (document.querySelector('.side-actions')) {
      return;
    }
    
    // 创建侧边按钮组容器
    const sideActionsContainer = document.createElement('div');
    sideActionsContainer.className = 'side-actions';
    
    // 设置按钮组HTML内容
    sideActionsContainer.innerHTML = `
      <!-- 咨询按钮 -->
      <div class="side-action-item">
        <button class="side-action-btn btn-consult" title="在线咨询">
          <i class="fas fa-headset"></i>
        </button>
      </div>
      
      <!-- 试算按钮 -->
      <div class="side-action-item">
        <button class="side-action-btn btn-calculate" title="免费试算">
          <i class="fas fa-calculator"></i>
        </button>
      </div>
      
      <!-- 售后按钮 -->
      <div class="side-action-item">
        <button class="side-action-btn btn-service" title="售后服务">
          <i class="fas fa-tools"></i>
        </button>
      </div>
      
      <!-- 返回顶部按钮 -->
      <div class="side-action-item">
        <button class="side-action-btn btn-backtop" title="返回顶部">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>
    `;
    
    // 添加到页面
    document.body.appendChild(sideActionsContainer);
    
    // 创建售后服务窗口
    createServiceWindow();
    
    // 添加样式
    addSideActionsStyles();
    
    // 初始化按钮功能
    initSideActionsButtons();
  }
  
  // 添加侧边按钮组样式
  function addSideActionsStyles() {
    // 检查是否已存在样式
    if (document.getElementById('side-actions-styles')) {
      return;
    }
    
    const styleElement = document.createElement('style');
    styleElement.id = 'side-actions-styles';
    
    styleElement.textContent = `
      /* 基础样式 */
      .side-actions {
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      
      /* 售后服务窗口样式 */
      .service-window {
        position: fixed;
        right: 80px;
        top: 50%;
        transform: translateY(-50%);
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        width: 300px;
        padding: 0;
        z-index: 998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .service-window.show {
        display: block;
        opacity: 1;
      }
      
      .service-window-header {
        padding: 15px 20px;
        background-color: #1E88E5;
        color: white;
        border-radius: 8px 8px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .service-window-header h3 {
        margin: 0;
        font-size: 18px;
      }
      
      .service-window-close {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .service-window-content {
        padding: 20px;
      }
      
      .service-window-content p {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
      }
      
      .service-window-content p:last-child {
        margin-bottom: 0;
      }
      
      .service-window-content i {
        color: #1E88E5;
        margin-right: 15px;
        width: 20px;
        text-align: center;
        font-size: 1.2rem;
      }
      
      .service-window-content span {
        font-size: 1rem;
      }
      
      .side-action-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .side-action-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #1E88E5;
        color: white;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3);
      }
      
      .side-action-btn:hover {
        background-color: #1565C0;
        transform: translateX(-3px);
        box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4);
      }
      
      .btn-backtop {
        background-color: white;
        color: #1E88E5;
        border: 2px solid #1E88E5;
      }
      
      .btn-backtop:hover {
        background-color: #1E88E5;
        color: white;
      }
      
      /* 响应式设计 */
      @media (max-width: 768px) {
        .side-actions {
          right: 10px;
          gap: 8px;
        }
        
        .side-action-btn {
          width: 40px;
          height: 40px;
          font-size: 16px;
        }
      }
      
      /* 移动设备响应式设计 */
      @media (max-width: 480px) {
        .service-window {
          position: fixed;
          right: 60px; /* 紧挨着售后按钮 */
          top: 50%;
          transform: translateY(-50%);
          width: auto; /* 自适应宽度 */
          min-width: 120px; /* 设置最小宽度 */
        }
        
        .service-window-header {
          padding: 8px 15px; /* 缩小标题行高度 */
        }
        
        .service-window-header h3 {
          font-size: 14px;
          white-space: nowrap; /* 标题不换行 */
        }
        
        .service-window-content {
          padding: 10px; /* 保持内容区高度不变 */
        }
        
        .service-window-content p {
          margin-bottom: 8px;
          font-size: 12px;
          white-space: nowrap; /* 内容不换行 */
        }
        
        .service-window-content i {
          font-size: 0.9rem;
          margin-right: 10px;
        }
        
        .service-window-content span {
          font-size: 0.8rem;
        }
      }
    `;
    
    document.head.appendChild(styleElement);
  }
  
  // 创建售后服务窗口
  function createServiceWindow() {
    // 检查是否已存在售后服务窗口
    if (document.querySelector('.service-window')) {
      return;
    }
    
    // 创建售后服务窗口
    const serviceWindow = document.createElement('div');
    serviceWindow.className = 'service-window';
    serviceWindow.id = 'serviceWindow';
    
    // 设置窗口HTML内容
    serviceWindow.innerHTML = `
      <div class="service-window-header">
        <h3>售后服务</h3>
        <button class="service-window-close" id="closeServiceWindow">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="service-window-content">
        <p>
          <i class="fas fa-phone"></i>
          <span>13401148888</span>
        </p>
        <p>
          <i class="fas fa-envelope"></i>
          <span>kehumanyidu@dghpc.com</span>
        </p>
      </div>
    `;
    
    // 添加到页面
    document.body.appendChild(serviceWindow);
  }
  
  // 初始化按钮功能
  function initSideActionsButtons() {
    // 返回顶部按钮
    const backtopBtn = document.querySelector('.btn-backtop');
    if (backtopBtn) {
      backtopBtn.addEventListener('click', function() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
      
      // 监听滚动事件显示/隐藏返回顶部按钮
      window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
          backtopBtn.style.opacity = '1';
          backtopBtn.style.visibility = 'visible';
        } else {
          backtopBtn.style.opacity = '0';
          backtopBtn.style.visibility = 'hidden';
        }
      });
      
      // 初始隐藏
      backtopBtn.style.opacity = '0';
      backtopBtn.style.visibility = 'hidden';
      backtopBtn.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
    }
    
    // 咨询按钮
    const consultBtn = document.querySelector('.btn-consult');
    if (consultBtn) {
      consultBtn.addEventListener('click', function() {
        alert('在线咨询');
      });
    }
    
    // 试算按钮
    // 功能已由trial-form.js实现
    // 移除事件监听以避免冲突
    const calculateBtn = document.querySelector('.btn-calculate');
    // 保留元素引用但不添加任何事件监听
    // 实际功能由trial-form.js处理
    
    // 售后按钮
    const serviceBtn = document.querySelector('.btn-service');
    if (serviceBtn) {
      serviceBtn.addEventListener('click', function() {
        const serviceWindow = document.getElementById('serviceWindow');
        serviceWindow.classList.toggle('show');
      });
    }
    
    // 售后服务窗口关闭按钮
    const closeServiceWindow = document.getElementById('closeServiceWindow');
    if (closeServiceWindow) {
      closeServiceWindow.addEventListener('click', function() {
        const serviceWindow = document.getElementById('serviceWindow');
        serviceWindow.classList.remove('show');
      });
    }
    
    // 点击窗口外部关闭
    document.addEventListener('click', function(event) {
      const serviceWindow = document.getElementById('serviceWindow');
      if (serviceWindow && !serviceWindow.contains(event.target) && !event.target.closest('.btn-service')) {
        serviceWindow.classList.remove('show');
      }
    });
  }
  
  // 确保DOM加载完成后初始化
  function init() {
    // 检查Font Awesome是否已加载，如果没有则加载
    if (!document.querySelector('link[href*="font-awesome"]')) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
      document.head.appendChild(link);
      
      // 等待Font Awesome加载完成后再创建按钮组
      link.onload = createSideActions;
    } else {
      // 如果已加载，直接创建按钮组
      createSideActions();
    }
  }
  
  // 导出初始化函数
  window.initSideActions = init;
})();